<template>
	<view class="my-page">
		
		<!-- 用户信息区域 -->
		<view class="user-info" @click="goToLogin">
			<view class="avatar-container">
			    <image 
			      :src="userInfo.avatar || '/static/no log.png'" 
			      mode="widthFix" 
			      class="avatar" 
			    />
			  </view>
			<view class="user-details">
				<text class="phone" >{{ userInfo.phone || '未登录' }}</text>
				<text class="nickname">{{ userInfo.nickname || '' }}</text>
			</view>
			<text class="icon" @click="goToSetting">...</text>
		</view>
		
		<!-- 我的订单 -->
		<view class="order-section">
			<view class="section-header">
				<text class="section-title">我的订单</text>
				<text class="view-all" @click="goToOrder">全部订单 ></text>
			</view>
			
			<view class="order-types">
				<view class="order-type" v-for="(type, index) in orderTypes" :key="index">
					<image :src="type.icon" mode="aspectFit" class="order-icon" />
					<text class="order-text">{{ type.text }}</text>
				</view>
			</view>
		</view>
		
		<!-- 功能区 -->
		<view class="function-list">
		  <view class="function-item" v-for="(item, index) in functions" :key="index" @click="handleFunctionClick(index)">
		    <view class="item-icon-text">
		      <image :src="item.icon" mode="aspectFit" class="item-icon" />
		      <text class="item-text">{{ item.text }}</text>
		    </view>
		    <text class="arrow">></text>
		  </view>
		</view>
		
		<view class="auth-btn" @click="handleAuthClick">
			{{ isLogin ? '退出登录' : '登录' }}
		</view>
		
	</view>
</template>

<script>
	export default {
	  data() {
	    return {
	       orderTypes: [
	            { icon: '/static/icons/order_pending.png', text: '待支付' },
	            { icon: '/static/icons/order_delivery.png', text: '待配送' },
	            { icon: '/static/icons/order_delivered.png', text: '已配送' },
	            { icon: '/static/icons/order_refunded.png', text: '已退款' }
	          ],
	          functions: [
	            { icon: '/static/icons/address.png', text: '收货地址' },
	            { icon: '/static/icons/balance.png', text: '余额' },
	            { icon: '/static/icons/discount.png', text: '优惠券' },
	            { icon: '/static/icons/about.png', text: '关于我们' }
	          ],
	      userInfo: {},
	      isLogin: false,
	      // 新增：后端接口基础地址（需替换为实际后端地址）
	      baseUrl: 'http://localhost:3000/api' 
	    };
	  },
	
	  onShow() {
	    this.checkLoginStatus();
	  },
	
	  methods: {
	    // 检查登录状态（从后端校验token有效性）
	    checkLoginStatus() {
	      const token = uni.getStorageSync('token');
	      if (!token) {
	        this.userInfo = {};
	        this.isLogin = false;
	        return;
	      }
	
	      // 调用后端接口校验token
	      uni.request({
	        url: `${this.baseUrl}/user/check`,
	        method: 'GET',
	        header: {
	          Authorization: `Bearer ${token}`
	        },
	        success: (res) => {
	          if (res.data.code === 200) {
	            this.userInfo = res.data.data;
	            this.isLogin = true;
	          } else {
	            uni.removeStorageSync('token');
	            this.userInfo = {};
	            this.isLogin = false;
	          }
	        },
	        fail: () => {
	          uni.removeStorageSync('token');
	          this.userInfo = {};
	          this.isLogin = false;
	        }
	      });
	    },
	
	    // 跳转到设置页面
	    goToSetting() {
	      uni.navigateTo({
	        url: "/pages/my/setting"
	      });
	    },
	
	    // 跳转到订单页面
	    goToOrder() {
	    //   if (!this.isLogin) {
	    //     uni.showToast({ title: '请先登录', icon: 'none' });
	    //     return;
	    //   }
	      uni.navigateTo({ url: "/pages/my/order" });
	    },
	
	    // 功能按钮点击事件
	    handleFunctionClick(index) {
	      // if (!this.isLogin) {
	      //   uni.showToast({ title: '请先登录', icon: 'none' });
	      //   return;
	      // }
	      const functionName = this.functions[index].text;
	      switch (index) {
	        case 0: // 收货地址
	          uni.navigateTo({ url: '/pages/address/address' });
	          break;
	        case 1: // 余额
	          uni.navigateTo({ url: '/pages/balance/balance' });
	          break;
			case 2: // 优惠券
			  uni.navigateTo({ url: '/pages/discount/account' });
			  break;
			case 3: // 关于我们
			  uni.navigateTo({ url: '/pages/about/about' });
			  break;
	      }
	    },
	
	    // 处理登录/退出登录点击事件
	    handleAuthClick() {
	      if (this.isLogin) {
	        this.handleLogout();
	      } else {
	        uni.navigateTo({ url: '/pages/index/login/login' });
	      }
	    },
	
	    // 退出登录（调用后端接口销毁token）
	    // handleLogout() {
	    //   uni.showModal({
	    //     title: '提示',
	    //     content: '确定要退出登录吗？',
	    //     success: (res) => {
	    //       if (res.confirm) {
	    //         uni.request({
	    //           url: `${this.baseUrl}/user/logout`,
	    //           method: 'POST',
	    //           header: {
	    //             Authorization: `Bearer ${uni.getStorageSync('token')}`
	    //           },
	    //           success: () => {
	    //             uni.removeStorageSync('token');
	    //             uni.removeStorageSync('userInfo');
	    //             this.checkLoginStatus();
	    //             uni.showToast({ title: '退出成功', icon: 'success' });
	    //           }
	    //         });
	    //       }
	    //     }
	    //   });
	    // }
	  }
	};
</script>

<style>
	.my-page {
		min-height: 100vh;
		background-color: #f9f5ff;
		font-family: -apple-system, BlinkMacSystemFont, sans-serif;
	}
	
	/* 顶部导航栏 */
	.navbar {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 100rpx;
		background-color: #9370db;
		color: white;
		padding: 0 30rpx;
	}
	
	.navbar .title {
		font-size: 36rpx;
		font-weight: bold;
	}
	
	.right-icons {
		display: flex;
		align-items: center;
	}
	
	.icon {
		font-size: 36rpx;
		margin-left: 30rpx;
	}
	
	/* 用户信息区域 */
	.user-info {
		background-color: #9370db;
		padding: 30rpx;
		display: flex;
		align-items: center;
		color: white;
	}
	
	.avatar-container {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		background-color: white;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 20rpx;
	}
	
	.avatar {
		width: 110rpx;
		height: 110rpx;
		border-radius: 50%;
	}
	
	.user-details {
		flex: 1;
	}
	
	.phone {
		font-size: 32rpx;
		font-weight: bold;
		display: block;
		margin-bottom: 10rpx;
	}
	
	.nickname {
		font-size: 26rpx;
		opacity: 0.9;
	}
	
	/* 我的订单区域 */
	.order-section {
		background-color: white;
		border-radius: 20rpx;
		margin: 20rpx;
		padding: 20rpx;
	}
	
	.section-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}
	
	.section-title {
		font-size: 30rpx;
		font-weight: bold;
		color: #6a4894;
	}
	
	.view-all {
		font-size: 26rpx;
		color: #9370db;
	}
	
	.order-types {
		display: flex;
		justify-content: space-around;
	}
	
	.order-type {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	.order-icon {
	  width: 40rpx;
	  height: 40rpx;
	  margin-bottom: 10rpx;
	}
	
	.order-text {
		font-size: 24rpx;
		color: #666;
	}
	

	/* 功能区 */
	.function-list {
	  background-color: #fff;
	  margin: 0 20rpx;
	  border-radius: 20rpx;
	}
	
	.function-item {
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	  padding: 30rpx;
	  border-bottom: 1rpx solid #f5f5f5;
	}
	
	.function-item:last-child {
	  border-bottom: none;
	}
	
	.item-icon-text {
	  display: flex;
	  align-items: center;
	}
	
	.item-icon {
	  width: 36rpx;
	  height: 36rpx;
	  margin-right: 20rpx;
	}

	.item-text {
	  font-size: 28rpx;
	  color: #333;
	}
	
	.arrow {
	  color: #999;
	  font-size: 24rpx;
	}
	
	/* 登录/退出按钮 */
	.auth-btn {
		margin: 20px 16px;
		padding: 12px 0;
		text-align: center;
		background-color: #9c27b0;
		color: #ffffff;
		font-size: 16px;
		border-radius: 8px;
		letter-spacing: 1px;
	}
</style>
